<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>小傻子的爱情</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link href="css/bootstrap.min.css" rel="stylesheet"/>

    <link href="css/sty.css" rel="stylesheet" />
    <link href="css/one.css" rel="stylesheet" />

    <!--照片墙-->
    <!--必要样式-->
    <link href="css/photopile.css" rel="stylesheet">
    <link rel="stylesheet" href="css/animate.css">
</head>
<body class="body">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"
     data-anijs="if: mouseover, do: bounceIn animated"
     style="background-color: #f99ec7 !important;box-shadow: 0 0 2px 0 #acacac;">
    <img class="pull-left" style="display: inline-block !important;margin: 10px 25px 10px 60px"
         src="images/logo.png" title="">
    <div class="col-xs-8 text-center txt" data-bind="">
        陪伴是最长情的告白，无论生老病死，我都愿陪你到天荒地老
    </div>
</nav>
<div class="container-fluid" style="margin-top: 88px">
    <div id="begin" class="col-xs-12 text-center txt underline" data-anijs="if: mouseover, do: swing animated" >
        <h2 class="col-xs-12" style="font-family: 'Great Vibes',cursive;
    color: #283a44; padding-bottom: 0px;">我们的遇见，是爱情的开始</h2>
        <h2 class="col-xs-12" style="font-family: 'Great Vibes',cursive;
    color: #283a44; padding-bottom: 0px;">我们的爱情，是幸福的开始</h2>
        <h2 class="col-xs-12" style="font-family: 'Great Vibes',cursive;
    color: #283a44; padding-bottom: 0px;">我们的幸福，是平平淡淡的陪伴</h2>
    </div>
    <span class="wow fadeInUp animated col-xs-12 text-center" data-wow-delay="0.7s" style="color: rgb(239, 106, 138);
         visibility: visible; animation-delay: 0.7s; animation-name: fadeInUp;margin: 15px auto;font-size: 16px">
        ♥ 2017-05-26 ♥</span>
    <div class="col-xs-12">
            <div class="col-xs-6 text-right"
                 data-anijs="if: click, do: rollOut animated, to: .boy, after: $removeAnim">
                <ul class="ch-grid man wow flipInX animated" data-wow-delay="0.5s" style="visibility: visible; animation-delay: 0.5s; animation-name: flipInX;">
                    <li class="boy">
                        <img src="images/boy.png" alt="">

                    </li>
                </ul>
            </div>
            <div class="and">&</div>
            <div class="col-xs-6 text-left"
                 data-anijs="if: click, do: rollIn animated, to: .girl, after: $removeAnim">
                <ul class="ch-grid woman wow flipInX animated" data-wow-delay="0.5s" style="visibility: visible; animation-delay: 0.5s; animation-name: flipInX;">
                    <li class="girl">
                        <img src="images/girl.png" alt="">
                    </li>
                </ul>
            </div>
    </div>
    <div class="col-xs-12 text-center txt underline">
        <h2 class="col-xs-12" style="font-family: 'Great Vibes',cursive;
    color: #283a44; padding-bottom: 0px;">我们的爱情历程</h2>
    </div>

    <div id="dslc-module-4" class=" dslc-module-Pluton_Time_Line dslc-in-viewport-check dslc-in-viewport-anim-none   dslc-module-handle-like-regular dslc-in-viewport" data-module-id="4" data-dslc-module-id="Pluton_Time_Line" data-dslc-module-size="12" data-dslc-anim="none" data-dslc-anim-delay="0" data-dslc-anim-duration="650" data-dslc-anim-easing="ease" data-dslc-preset="" style="animation: forwards 0.65s ease 0s 1 normal none running;">
        <div class="ilove_timeline">
            <div class="col-md-12">
                <ul class="timeline col-xs-12" >
                    <li class="col-xs-12" data-anijs="if: scroll, on: window, do: slideInLeft   animated, before: $scrollReveal repeat">
                        <div class="timeline-badge wow fadeInUp animated" data-wow-delay="0.5s"
                             style="visibility: visible; animation-delay: 0.5s; animation-name: fadeInUp;">
                            <i> ♥ </i>
                        </div>
                        <div class="timeline-panel wow fadeInLeft animated" data-wow-delay="0.7s" style="visibility: visible; animation-delay: 0.7s; animation-name: fadeInLeft;">
                            <div  class="" style="padding: 0;width: 102px;position: relative;float: left">
                                <img src="images/x1.png" alt="" style="width: 102px;height: 102px">
                            </div>
                            <div class="" style="padding: 0 15px 0 135px">
                            <div class="timeline-heading">
                                <p><br></p>
                            </div>
                            <div class="timeline-body">
                                <div >
                                    <div  >
                                        <p class="txtcolor">那一天，你应聘到公司来上班，在公司外小卖部门口遇见你～而你在等我的到来，那个时候我们彼此都不认识，甚至不知道对方的名字～而我只能叫你小师妹～</p>
                                    </div>
                                </div>
                            </div>
                                <div class="timeline-foot">2017年3月20日</div>
                            </div>
                        </div>
                    </li>
                    <li class="timeline-inverted  col-xs-12" data-anijs="if: scroll, on: window, do: slideInRight animated, before: $scrollReveal repeat">
                        <div class="timeline-badge wow fadeInUp animated" data-wow-delay="0.5s" style="visibility: visible; animation-delay: 0.5s; animation-name: fadeInUp;">
                            <i> ♥ </i>
                        </div>
                        <div class="timeline-panel wow fadeInLeft animated" data-wow-delay="0.7s" style="visibility: visible; animation-delay: 0.7s; animation-name: fadeInLeft;">
                            <div  class="" style="padding: 0;width: 102px;position: relative;float: right">
                                <img src="images/x2.png" alt="" style="width: 102px;height: 102px">
                            </div>
                            <div class="" style="padding: 0 135px 0 15px">

                            <div class="timeline-heading">
                                <p><br></p>
                            </div>
                            <div class="timeline-body">
                                <div >
                                    <div >
                                        <p class="txtcolor">我的心动，你不知道，我亦不敢表达，那个时候，我们连简单的肢体接触都会脸红。</p>
                                    </div>
                                </div>
                            </div>
                            <div class="timeline-foot">2017年3月21日</div>
                                </div>
                        </div>
                    </li>
                    <li class=" col-xs-12" data-anijs="if: scroll, on: window, do: rollIn animated, before: $scrollReveal repeat">
                        <div class="timeline-badge wow fadeInUp animated" data-wow-delay="0.5s" style="visibility: visible; animation-delay: 0.5s; animation-name: fadeInUp;">
                            <i> ♥ </i>
                        </div>
                        <div class="timeline-panel wow fadeInLeft animated" data-wow-delay="0.7s" style="visibility: visible; animation-delay: 0.7s; animation-name: fadeInLeft;">
                            <div  class="" style="padding: 0;width: 102px;position: relative;float: left">
                                <img src="images/x3.png" alt="" style="width: 102px;height: 102px">
                            </div>
                            <div class="" style="padding: 0 15px 0 135px">
                            <div class="timeline-heading">
                                <p><br></p>
                            </div>
                            <div class="timeline-body">
                                <div >
                                    <div >
                                        <p class="txtcolor">在一起工作时间长了，爱在心口难开，不想错过，不想失去（借口你生日那天请你吃饭）</p>
                                    </div>
                                </div>
                            </div>
                                <div class="timeline-foot">2017年5月22日</div>
                                </div>
                        </div>
                    </li>
                    <li class="timeline-inverted  col-xs-12" data-anijs="if: scroll, on: window, do: rollIn animated, before: $scrollReveal repeat">
                        <div class="timeline-badge wow fadeInUp animated" data-wow-delay="0.5s" style="visibility: visible; animation-delay: 0.5s; animation-name: fadeInUp;">
                            <i> ♥ </i>
                        </div>
                        <div class="timeline-panel wow fadeInLeft animated" data-wow-delay="0.7s" style="visibility: visible; animation-delay: 0.7s; animation-name: fadeInLeft;">
                            <div  class="" style="padding: 0;width: 102px;position: relative;float: right">
                                <img src="images/x4.png" alt="" style="width: 102px;height: 102px">
                            </div>
                            <div class="" style="padding: 0 135px 0 15px">
                            <div class="timeline-heading">
                                <p><br></p>
                            </div>

                            <div class="timeline-body">
                                <div >
                                    <div >
                                        <p class="txtcolor">没有合适理由请客，胡思乱想，懵懵懂懂上了一天班</p>
                                    </div>
                                </div>
                            </div>
                                <div class="timeline-foot">2017年5月23日</div>
                                </div>
                        </div>
                    </li>
                    <li data-anijs="if: scroll, on: window, do: rollIn animated, before: $scrollReveal repeat"  class=" col-xs-12">
                        <div class="timeline-badge wow fadeInUp" data-wow-delay="0.5s" style="">
                            <i> ♥ </i>
                        </div>
                        <div class="timeline-panel wow fadeInLeft" data-wow-delay="0.7s" style="">
                            <div  class="" style="padding: 0;width: 102px;position: relative;float: left">
                                <img src="images/x5.png" alt="" style="width: 102px;height: 102px">
                            </div>
                            <div class="" style="padding: 0 15px 0 135px">
                            <div class="timeline-heading">
                                <p><br></p>
                            </div>
                            <div class="timeline-body">
                                <div >
                                    <div >
                                        <p class="txtcolor">你的生日一天天临近，作为第一次请女生吃饭，而我却什么都没有准备好</p>
                                    </div>
                                </div>
                            </div>
                                <div class="timeline-foot">2017年5月25日</div>
                                </div>
                        </div>
                    </li>
                    <li data-anijs="if: scroll, on: window, do: rollIn animated, before: $scrollReveal repeat"  class="timeline-inverted  col-xs-12">
                        <div class="timeline-badge wow fadeInUp" data-wow-delay="0.5s" style="">
                            <i> ♥ </i>
                        </div>
                        <div class="timeline-panel wow fadeInLeft" data-wow-delay="0.7s" style="">
                            <div  class="" style="padding: 0;width: 102px;position: relative;float: left">
                                <img src="images/x6.png" alt="" style="width: 102px;height: 102px">
                            </div>
                            <div class="" style="padding: 0 15px 0 135px">
                                <div class="timeline-heading">
                                    <p><br></p>
                                </div>
                                <div class="timeline-body">
                                    <div >
                                        <div >
                                            <p class="txtcolor">这一天，终于来到了，记得下班早，而我却没有定好餐厅，我们只能一起去路边摊吃罐罐米线😂</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="timeline-foot">2017年5月26日</div>
                            </div>
                        </div>
                    </li>
                    <li data-anijs="if: scroll, on: window, do: rollIn animated, before: $scrollReveal repeat"  class="col-xs-12">
                        <div class="timeline-badge wow fadeInUp" data-wow-delay="0.5s" style="">
                            <i> ♥ </i>
                        </div>
                        <div class="timeline-panel wow fadeInLeft" data-wow-delay="0.7s" style="">
                            <div  class="" style="padding: 0;width: 102px;position: relative;float: left">
                                <img src="images/x7.png" alt="" style="width: 102px;height: 102px">
                            </div>
                            <div class="" style="padding: 0 15px 0 135px">
                                <div class="timeline-heading">
                                    <p><br></p>
                                </div>
                                <div class="timeline-body">
                                    <div >
                                        <div>
                                            <p class="txtcolor">也在你生日那一晚，你成为了我的女朋友，没有玫瑰花送给你，甚至连个定情信物都没有。</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="timeline-foot">2017年5月26日</div>
                            </div>
                        </div>
                    </li>
                    <li data-anijs="if: scroll, on: window, do: rollIn animated, before: $scrollReveal repeat"  class="timeline-inverted  col-xs-12">
                        <div class="timeline-badge wow fadeInUp" data-wow-delay="0.5s" style="">
                            <i> ♥ </i>
                        </div>
                        <div class="timeline-panel wow fadeInLeft" data-wow-delay="0.7s" style="">
                            <div  class="" style="padding: 0;width: 102px;position: relative;float: left">
                                <img src="images/x8.png" alt="" style="width: 102px;height: 102px">
                            </div>
                            <div class="" style="padding: 0 15px 0 135px">
                                <div class="timeline-heading">
                                    <p><br></p>
                                </div>
                                <div class="timeline-body">
                                    <div >
                                        <div >
                                            <p class="txtcolor">成为你男朋友之后的第一天，我们在公司约会～搞得好像是偷东西一样😂😂</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="timeline-foot">2017年5月27日</div>
                            </div>
                        </div>
                    </li>
                    <li data-anijs="if: scroll, on: window, do: rollIn animated, before: $scrollReveal repeat"  class=" col-xs-12">
                        <div class="timeline-badge wow fadeInUp" data-wow-delay="0.5s" style="">
                            <i> ♥ </i>
                        </div>
                        <div class="timeline-panel wow fadeInLeft" data-wow-delay="0.7s" style="">
                            <div  class="" style="padding: 0;width: 102px;position: relative;float: left">
                                <img src="images/x9.png" alt="" style="width: 102px;height: 102px">
                            </div>
                            <div class="" style="padding: 0 15px 0 135px">
                                <div class="timeline-heading">
                                    <p><br></p>
                                </div>
                                <div class="timeline-body">
                                    <div >
                                        <div >
                                            <p class="txtcolor">每天晚上我们都会通微信视频到很晚才睡，有时候甚至通宵不挂断，只为听你呼吸的声音</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="timeline-foot">2017年5月30日</div>
                            </div>
                        </div>
                    </li>
                    <li data-anijs="if: scroll, on: window, do: rollIn animated, before: $scrollReveal repeat"  class="timeline-inverted  col-xs-12">
                        <div class="timeline-badge wow fadeInUp" data-wow-delay="0.5s" style="">
                            <i> ♥ </i>
                        </div>
                        <div class="timeline-panel wow fadeInLeft" data-wow-delay="0.7s" style="">
                            <div  class="" style="padding: 0;width: 102px;position: relative;float: left">
                                <img src="images/x10.png" alt="" style="width: 102px;height: 102px">
                            </div>
                            <div class="" style="padding: 0 15px 0 135px">
                                <div class="timeline-heading">
                                    <p><br></p>
                                </div>
                                <div class="timeline-body">
                                    <div >
                                        <div>
                                            <p class="txtcolor">公司放假那天，我们一起去了洪崖洞玩耍，意外的惊喜就是有道彩虹迎接我们</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="timeline-foot">2017年6月3日</div>
                            </div>
                        </div>
                    </li>
                    <li data-anijs="if: scroll, on: window, do: rollIn animated, before: $scrollReveal repeat"  class=" col-xs-12">
                        <div class="timeline-badge wow fadeInUp" data-wow-delay="0.5s" style="">
                            <i> ♥ </i>
                        </div>
                        <div class="timeline-panel wow fadeInLeft" data-wow-delay="0.7s" style="">
                            <div  class="" style="padding: 0;width: 102px;position: relative;float: left">
                                <img src="images/x11.png" alt="" style="width: 102px;height: 102px">
                            </div>
                            <div class="" style="padding: 0 15px 0 135px">
                                <div class="timeline-heading">
                                    <p><br></p>
                                </div>
                                <div class="timeline-body">
                                    <div >
                                        <div >
                                            <p class="txtcolor">我们第一次争吵，我冒雨来到你家，那也是第一次在你家留宿。</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="timeline-foot">2017年11月30日</div>
                            </div>
                        </div>
                    </li>
                    <li data-anijs="if: scroll, on: window, do: rollIn animated, before: $scrollReveal repeat"  class="timeline-inverted  col-xs-12">
                        <div class="timeline-badge wow fadeInUp" data-wow-delay="0.5s" style="">
                            <i> ♥ </i>
                        </div>
                        <div class="timeline-panel wow fadeInLeft" data-wow-delay="0.7s" style="">
                            <div  class="" style="padding: 0;width: 102px;position: relative;float: left">
                                <img src="images/x12.png" alt="" style="width: 102px;height: 102px">
                            </div>
                            <div class="" style="padding: 0 15px 0 135px">
                                <div class="timeline-heading">
                                    <p><br></p>
                                </div>
                                <div class="timeline-body">
                                    <div >
                                        <div>
                                            <p class="txtcolor">我们的爱情还有很长很长的路要走下去，我们的故事也还很长...很长...</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="timeline-foot">2019年8月6日</div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>

    <div class="col-xs-12 text-center txt underline">
        <h2 class="col-xs-12" style="font-family: 'Great Vibes',cursive;
    color: #283a44; padding-bottom: 0px;">✋山盟海誓🤚</h2>
    </div>
    <div class="col-xs-12 text-center "
         data-anijs="if: scroll,on: window,do: zoomInDown animated, before: $scrollReveal repeat">
        <span class="col-xs-12" style="font-family: 'Great Vibes',cursive;color: #283a44; font-size: 20px;
        margin: 15px;padding: 15px;line-height: 33px">
            与你的相遇，是命中注定的一生一世。与你的相爱，是命中注定的地老天荒<br>
            今生携手徜徉天地间，为你遮风挡雨，相濡以沫，并肩悠游滚滚红尘中<br>
            即使有一天，你的步履变得蹒跚，青丝变成白发，红润的脸上爬满了皱纹，但我仍要携着你的手，漫步在夕阳的余辉下<br>
　　     你，我一生最爱的人;你，我一生最想的人;你，我一生守候的人;你，我一生唯一的人<br>
           不论你生病或是健康、富有或贫穷，始终忠於你，直到生命尽头
　</span>
    </div>

    <div class="col-xs-12 text-center txt underline">

<h2 class="col-xs-12" style="font-family: 'Great Vibes',cursive;
    color: #283a44; padding-bottom: 0px;">✋爱情见证✋</h2>
</div>

<div class="photopile-wrapper col-xs-12 text-center" data-anijs="if: scroll, on: window, do: rollIn animated, before: $scrollReveal repeat">

<ul class="photopile col-xs-12">

<li class="ui-draggable ui-draggable-handle" style="transform: rotate(9deg); margin: -25px; z-index: 4; background-color: white; background-position: initial initial; background-repeat: initial initial;">

<a href="images/p1.jpg" style="padding: 2px;">

<img src="images/p1_s.jpg" alt="第一次相见">
</a>
</li>

<li class="ui-draggable ui-draggable-handle" style="transform: rotate(13deg); margin: -25px; z-index: 3; background-color: white; background-position: initial initial; background-repeat: initial initial;">

<a href="images/p2.jpg" style="padding: 2px;">

<img src="images/p2_s.jpg" alt="第一次约会">
</a>
</li>

<li class="ui-draggable ui-draggable-handle" style="transform: rotate(25deg); margin: -25px; z-index: 3; background-color: white; background-position: initial initial; background-repeat: initial initial;">

<a href="images/p3.jpg" style="padding: 2px;">

<img src="images/p3_s.jpg" alt="约会">
</a>
</li>

<li class="ui-draggable ui-draggable-handle" style="transform: rotate(0deg); margin: -25px; z-index: 2; background-color: white; background-position: initial initial; background-repeat: initial initial;">

<a href="images/p4.jpg" style="padding: 2px;">

<img src="images/p4_s.jpg" alt="看电影 ">
</a>
</li>

<li class="ui-draggable ui-draggable-handle" style="transform: rotate(16deg); margin: -25px; z-index: 1; background-color: white; background-position: initial initial; background-repeat: initial initial;">

<a href="images/p5.jpg" style="padding: 2px;">

<img src="images/p5_s.jpg" alt="拥抱">
</a>
</li>

<li class="ui-draggable ui-draggable-handle" style="transform: rotate(16deg); margin: -25px; z-index: 4; background-color: white; background-position: initial initial; background-repeat: initial initial;">

<a href="images/p6.jpg" style="padding: 2px;">

<img src="images/p6_s.jpg" alt="聚会">
</a>
</li>

<li class="ui-draggable ui-draggable-handle" style="transform: rotate(-20deg); margin: -25px; z-index: 1; background-color: white; background-position: initial initial; background-repeat: initial initial;">

<a href="images/p7.jpg" style="padding: 2px;">

<img src="images/p7_s.jpg" alt="离别">
</a>
</li>

<li class="ui-draggable ui-draggable-handle" style="transform: rotate(4deg); margin: -25px; z-index: 2; background-color: white; background-position: initial initial; background-repeat: initial initial;">

<a href="images/p8.jpg" style="padding: 2px;">

<img src="images/p8_s.jpg" alt="亲吻">
</a>
</li>

<li class="ui-draggable ui-draggable-handle" style="transform: rotate(42deg); margin: -25px; z-index: 1; background-color: white; background-position: initial initial; background-repeat: initial initial;">

<a href="images/p9.jpg" style="padding: 2px;">

<img src="images/p9_s.jpg" alt="接送">
</a>
</li>

<li class="ui-draggable ui-draggable-handle" style="transform: rotate(-25deg); margin: -25px; z-index: 5; background-color: white; background-position: initial initial; background-repeat: initial initial;">

<a href="images/p10.jpg" style="padding: 2px;">

<img src="images/p10_s.jpg" alt="结婚">
</a>
</li>
</ul>
</div>

<p class="text-center" style="font-size: 10px"> Copyright &copy; 2017-2019<br>by Bzxy <br>website by  wuxia2001@sina.com</p>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>

<script src="js/jquery-ui.min.js"></script>

<script src="js/jquery.ui.touch-punch.min.js"></script>

<script src="js/photopile.js"></script>

<script type="text/javascript">
        $(function(){
            PhotoPile().scatter();
        });
    </script>
</div>
<audio id="bgmMusic" src="images/1.mp3"
preload="auto" type="audio/mp3" autoplay="" loop=""></audio>
<script src="js/anijs-min.js"></script>
<script src="js/anijs-helper-scrollreveal-min.js"></script>
<script src="js/flu.js" type="text/javascript"></script>
<div class="heart "  rel="like" style=" height:130px;
    width:130px;">
    <p id="pClick" style="text-align: center;font-size: 10px;margin-bottom: 0px;
    margin-top: 85px;">点赞接受</p>
    <div class="heartCa"></div></div>
<script type="text/javascript">
    $(document).ready(function(){
        $('body').on("click",'.heart',function(){
            $(this).css("background-position","")
            $(this).addClass("heartAnimation");
            $(this).addClass("clickH");
            $('#pClick').addClass('tC');
            setTimeout(function () {
                $(".heart").removeClass('heartAnimation');
            }, 1000);
        });
    });
</script>
</body>
</html>